<template>
    <view class="transparent">
        <u-popup v-model="show" mode="center" border-radius="10">
            <view class="content" @touchmove.stop.prevent>
                <view class="o-text-center o-font-bold o-margin-bottom-sm">{{ title }}</view>
                <scroll-view scroll-y="true" style="height: 50vh;"><view v-html="content"></view></scroll-view>
                <view class="o-margin-top-sm">
                    <u-button id="guideBtn" type="p" shape="circle" :disabled="disabled" @click="showReg">我已阅读并同意此协议{{ time > 0 ? time + 's' : '' }}</u-button>
                    <u-button type="d" shape="circle" style="margin-top: 20rpx;width: 200rpx;" @click="show = false">取消</u-button>
                </view>
            </view>
        </u-popup>
        <!-- <guide
            :show="showGuideMask"
            :guideArray="guideArray"
            :width="GWidth"
            :height="GHeight"
            :left="GLeft"
            :top="GTop"
            :currentIndex="currentGuideIndex"
            @click="nextGuideHandle('register-0')"
        ></guide> -->
    </view>
</template>

<script>

export default {
    // mixins: [guideMixin],
    data() {
        return {
            show: false, // 显示个人采购协议
            content: undefined,
            title: undefined,
            time: 10,
            timer: null,
            disabled: true,
            // guideArray: [
            //     {
            //         guideID: 'guideBtn',
            //         src: '/static/guide/5.png',
            //         imgW: 618,
            //         imgH: 302,
            //         width: 140,
            //         type: 'left',
            //         Mleft: 20,
            //         Btop: '30vh',
            //         direction: 'up',
            //         offset: -20
            //     }
            // ]
        };
    },
    created() {
        this.$u.$api.BaseApi.queryBaseAgreementApp().then(res => {
            let result = res[4];
            if (result) {
                this.show = true;
                this.disabled = true;
                this.content = result.content;
                this.title = result.name;
                clearInterval(this.timer);
                this.time = 10;
                this.timer = setInterval(() => {
                    if (this.time > 0) {
                        this.time -= 1;
                    } else {
                        clearInterval(this.timer);
                        this.disabled = false;
                    }
                }, 1000);
            } else {
                this.$u.toast('查无此协议！');
            }
        });
        // this.$u.sleep(600).then(() => {
        //     this.init();
        // });
    },
    methods: {
        init() {
            if (this.guideConfig.indexOf('register-0') == -1) {
                // 显示引导页面
                console.log('显示引导页面');
                this.showGuideMask = true;
                this.initGuideFun(this.currentGuideIndex);
            }
        },
        showReg(){
            this.$emit('show', 0)
        }
    }
};
</script>

<style lang="scss" scoped>
.content {
    width: 80vw;
    padding: 30rpx;
}
.transparent {
    background-color: rgba(0, 0, 0, 0.3);
}
</style>
